<template>
	<div class="dashboard">
		<div class="content">
			<div class="top-container">
				<div class="nav-container">
					<div @click="handleNavBtnClick('/pc-page1')" class="nav-btn-item">综合统计</div>
					<div class="nav-btn-item nav-btn-active">运营情况</div>
					<div class="nav-btn-item" @click="handleNavBtnClick('/pc-page3')">工程情况</div>
				</div>
				<div class="logo-container">
					<img class="logo-img" src="./images/logoText.png" alt="logo" />
				</div>
				<div class="time-container">
					<div class="time-icon-wrapper">
						<img class="time-icon-img" src="./images/time.png" alt="time" />
					</div>
					<div class="time-display-text">11:15</div>
					<div class="date-info-wrapper">
						<div class="date-text">2021年04月25日</div>
						<div class="week-text">星期四</div>
					</div>
				</div>
			</div>
			<div class="content-top">
				<div class="content-top-left">
					<pcPage2ItemBox1 ref="itemBox1" :chartData="pageData1" />
					<pcPage2ItemBox2 ref="itemBox2" :storageData="pageData2" />
				</div>
				<div class="echart-box-center">
					<div class="command-center-wrapper">
						<div class="command-center-stats">
							<div class="stat-item" v-for="(item, index) in summaryData" :key="index">
								<div class="stat-value">{{ item.value }}<span class="stat-unit">{{ item.unit }}</span></div>
								<div class="stat-label">{{ item.label }}</div>
							</div>
						</div>
					</div>

					<div class="page1-centet-wrapper">
						<pcPage2Centet ref="page1Centet" :companiesData="companiesData" />
					</div>
				</div>
				<div class="content-top-right">
					<pcPage2ItemBox3 ref="itemBox3" :chartData="pageData3" />
					<pcPage2ItemBox4 ref="itemBox4" :chartData="pageData4" />
				</div>
			</div>
			<div class="content-bottom">
				<pcPage2ItemBox5 ref="itemBox5" :chartData="pageData5" />
				<pcPage2ItemBox6 ref="itemBox6" :chartData="pageData6" />
				<pcPage2ItemBox7 ref="itemBox7" :chartData="pageData7" />
				<pcPage2ItemBox8 ref="itemBox8" :securityData="pageData8" />
			</div>
		</div>
	</div>
</template>

<script>
import pcPage2ItemBox1 from "./components/pc-page2/pc-page2-item-box-1.vue";
import pcPage2ItemBox2 from "./components/pc-page2/pc-page2-item-box-2.vue";
import pcPage2ItemBox3 from "./components/pc-page2/pc-page2-item-box-3.vue";
import pcPage2ItemBox4 from "./components/pc-page2/pc-page2-item-box-4.vue";
import pcPage2Centet from "./components/pc-page2/pc-page2-centet.vue";
import pcPage2ItemBox5 from "./components/pc-page2/pc-page2-item-box-5.vue";
import pcPage2ItemBox6 from "./components/pc-page2/pc-page2-item-box-6.vue";
import pcPage2ItemBox7 from "./components/pc-page2/pc-page2-item-box-7.vue";
import pcPage2ItemBox8 from "./components/pc-page2/pc-page2-item-box-8.vue";
export default {
	components: {
		pcPage2ItemBox1,
		pcPage2ItemBox2,
		pcPage2ItemBox3,
		pcPage2ItemBox4,
		pcPage2Centet,
		pcPage2ItemBox5,
		pcPage2ItemBox6,
		pcPage2ItemBox7,
		pcPage2ItemBox8,
	},
	data() {
		return {
			pageData1: [
				{ name: "1月", value: 850 },
				{ name: "2月", value: 750 },
				{ name: "3月", value: 900 },
				{ name: "4月", value: 950 },
				{ name: "5月", value: 800 },
				{ name: "6月", value: 900 },
				{ name: "7月", value: 950 },
				{ name: "8月", value: 750 },
				{ name: "9月", value: 500 },
				{ name: "10月", value: 600 },
				{ name: "11月", value: 700 },
				{ name: "12月", value: 550 },
			],
			pageData2: {
				storage1: { title: "管存量", value: 999999, unit: "万/m³", subtitle: "管存占比", percentage: 32 },
				storage2: { title: "管存量", value: 999999, unit: "万/m³", subtitle: "管存占比", percentage: 78 },
			},
			pageData3: [
				{ name: "1月", value: 200 },
				{ name: "2月", value: 240 },
				{ name: "3月", value: 200 },
				{ name: "4月", value: 170 },
				{ name: "5月", value: 240 },
				{ name: "6月", value: 120 },
				{ name: "7月", value: 170 },
				{ name: "8月", value: 150 },
				{ name: "9月", value: 130 },
				{ name: "10月", value: 120 },
				{ name: "11月", value: 150 },
				{ name: "12月", value: 120 },
			],
			pageData4: [
				{ name: "民用户", value: 1230, color: "#005cc577" },
				{ name: "非民用户", value: 1000, color: "#93d4fa77" },
			],
			pageData5: [
				{ name: "物联网表", value: 582 },
				{ name: "IC卡表", value: 421 },
				{ name: "机械表", value: 747 },
			],
			pageData6: [
				{ name: "中央资金", value: 41, color: "#0115b477" },
				{ name: "非民用工程", value: 32, color: "#495dff77" },
				{ name: "国债资金", value: 41, color: "#3190ff77" },
				{ name: "小微工程", value: 15, color: "#7laaff77" },
				{ name: "小区工程", value: 39, color: "#69cde777" },
				{ name: "液改气工程", value: 2, color: "#cbebff77" },
			],
			pageData7: [
				{ name: "1月", value: 700 },
				{ name: "2月", value: 500 },
				{ name: "3月", value: 650 },
				{ name: "4月", value: 628 },
				{ name: "5月", value: 500 },
				{ name: "6月", value: 620 },
			],
			pageData8: [
				{ id: '01', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '02', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '03', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '04', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '05', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '06', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '07', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '08', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '09', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '10', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '11', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '12', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '13', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '14', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '15', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '16', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '17', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '18', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '19', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' },
				{ id: '20', customerName: 'XXXXXXXXXXXXXXX', gasUsage: '123456789' }
			],
			summaryData: [
				{ value: "1268", unit: "km", label: "管网长度" },
				{ value: "368", unit: "个", label: "调压设施" },
				{ value: "6947", unit: "万/m³", label: "年销气总量" },
				{ value: "286", unit: "个", label: "场站数量" },
				{ value: "692", unit: "户", label: "用户数量" },
			],
			companiesData: [
				{ name: '长春市燃气', coord: [497, 498], isCenter: true, pipelineLength: 1580.5, regulatingFacilities: 156, annualGasSales: 28.6, stationCount: 12, userCount: 158000 },
				{ name: '德惠公司', coord: [630, 564], pipelineLength: 456.8, regulatingFacilities: 45, annualGasSales: 8.9, stationCount: 5, userCount: 42000 },
				{ name: '双阳公司', coord: [531, 438], pipelineLength: 389.2, regulatingFacilities: 38, annualGasSales: 7.2, stationCount: 4, userCount: 35000 },
				{ name: '公主岭公司', coord: [371, 418], pipelineLength: 523.6, regulatingFacilities: 52, annualGasSales: 10.5, stationCount: 6, userCount: 48000 },
				{ name: '长白山分公司', coord: [730, 199], pipelineLength: 234.5, regulatingFacilities: 28, annualGasSales: 4.8, stationCount: 3, userCount: 22000 },
				{ name: '龙井分公司', coord: [1028, 299], pipelineLength: 187.3, regulatingFacilities: 22, annualGasSales: 3.6, stationCount: 2, userCount: 18000 },
				{ name: '图们分公司', coord: [1049, 332], pipelineLength: 198.7, regulatingFacilities: 24, annualGasSales: 4.1, stationCount: 3, userCount: 19500 },
				{ name: '延边分公司', coord: [995, 352], pipelineLength: 312.4, regulatingFacilities: 35, annualGasSales: 6.8, stationCount: 4, userCount: 31000 },
				{ name: '琿春分公司', coord: [1128, 385], pipelineLength: 156.9, regulatingFacilities: 18, annualGasSales: 2.9, stationCount: 2, userCount: 15000 }
			]
		};
	},
	mounted() { this.pageinit(); },
	methods: {
		pageinit() {
			this.$nextTick(() => {
				this.$refs.itemBox1.initChart();
				this.$refs.itemBox2.initChart();
				this.$refs.itemBox3.initChart();
				this.$refs.itemBox4.initChart();
				this.$refs.itemBox5.initChart();
				this.$refs.itemBox6.initChart();
				this.$refs.itemBox7.initChart();
				this.$refs.page1Centet.initChart();
			});
		},
		handleNavBtnClick(path) { this.$router.push(path); },
	},
};
</script>

<style scoped lang="scss">
// SCSS 变量定义
$dashboard-width: 2704px;
$dashboard-height: 1560px;
$primary-color: #fff;
$secondary-color: rgba(255, 255, 255, 0.8);
$tertiary-color: rgba(255, 255, 255, 0.6);

.dashboard { width: $dashboard-width; height: $dashboard-height; overflow: hidden; position: relative; box-sizing: border-box; background: { image: url("./images/bg02.jpg"); size: 100% 100%; repeat: no-repeat; position: center center; } }
.content { width: 100%; height: 100%; overflow: hidden; position: relative; box-sizing: border-box; background: { image: url("./images/top.png"); size: 100% 80%; repeat: no-repeat; position: center top; } }
.top-container { width: 100%; height: 107px; display: flex; justify-content: space-between; align-items: center; position: relative; }
.nav-container { margin-left: 58px; display: flex; gap: 19px; }
.nav-btn-item { width: 193px; height: 76px; background: { image: url("./images/navBtnNormal.png"); size: 100% 100%; repeat: no-repeat; } display: flex; align-items: center; justify-content: center; font-size: 20px; color: $primary-color; cursor: pointer; }
.nav-btn-active { background-image: url("./images/navBtn.png"); }
.logo-container { position: absolute; left: calc(50% + 32px); transform: translateX(-50%); top: 31px; .logo-img { height: 62px; } }
.time-container { display: flex; align-items: center; gap: 23px; margin-right: 58px; .time-icon-img { width: 62px; height: 62px; } .time-display-text { font-size: 50px; color: $primary-color; font-weight: bold; margin-right: 23px; } .date-info-wrapper { display: flex; flex-direction: column; gap: 5px; .date-text { font-size: 20px; color: $secondary-color; } .week-text { font-size: 19px; color: $tertiary-color; } } }
.content-top { display: flex; justify-content: space-between; width: 100%;
	.content-top-left { flex-flow: column; width: 676px; margin-left: 63px; > div { margin-bottom: 59px; } }
	.content-top-right { flex-flow: column; width: 676px; margin-right: 63px; > div { margin-bottom: 59px; } }
	.echart-box-center { flex: 1; width: 1894px; display: flex; flex-direction: column; align-items: center; margin: 85px 29px 0; }
	.command-center-wrapper { width: 1256px; display: flex; flex-direction: column; align-items: center; margin-bottom: 25px; .command-center-stats { display: flex; justify-content: space-around; width: 100%; margin-top: 17px; }
		.stat-item { display: flex; flex-direction: column; align-items: center; margin: 0 14px; }
		.stat-value { font-size: 46px; font-weight: bold; margin-bottom: 10px; }
		.stat-item:nth-child(1) .stat-value { color: #f5e17a; }
		.stat-item:nth-child(2) .stat-value { color: #3cffb3; }
		.stat-item:nth-child(3) .stat-value { color: #6ad4ff; }
		.stat-item:nth-child(4) .stat-value { color: #a2c4ff; }
		.stat-item:nth-child(5) .stat-value { color: #ffb88c; }
		.stat-unit { font-size: 20px; margin-left: 5px; }
		.stat-label { font-size: 20px; color: #fff; }
	}
	.page1-centet-wrapper { display: block; width: 1256px; height: 717px; }
}
.content-bottom { display: flex; justify-content: space-between; width: calc(100% - 126px); padding: 0 63px; }
</style>
